<template>
  <div class="settings">
    <div class="page-header">
      <h2>系统设置</h2>
    </div>
    
    <el-card v-loading="loading">
      <el-form 
        ref="formRef" 
        :model="form" 
        label-width="120px"
      >
        <el-form-item label="数据库类型">
          <el-radio-group v-model="form.databaseType">
            <el-radio label="sqlite">SQLite</el-radio>
            <el-radio label="mysql">MySQL</el-radio>
            <el-radio label="sqlserver">SQL Server</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <!-- SQLite 配置 -->
        <div v-if="form.databaseType === 'sqlite'" class="db-config">
          <el-form-item label="存储路径">
            <el-input v-model="form.databaseConfig.sqlite.storage" placeholder="数据库文件路径" />
            <div class="form-help">相对路径基于应用根目录</div>
          </el-form-item>
        </div>
        
        <!-- MySQL 配置 -->
        <div v-if="form.databaseType === 'mysql'" class="db-config">
          <el-form-item label="主机">
            <el-input v-model="form.databaseConfig.mysql.host" placeholder="数据库主机" />
          </el-form-item>
          
          <el-form-item label="端口">
            <el-input-number v-model="form.databaseConfig.mysql.port" :min="1" :max="65535" />
          </el-form-item>
          
          <el-form-item label="用户名">
            <el-input v-model="form.databaseConfig.mysql.username" placeholder="数据库用户名" />
          </el-form-item>
          
          <el-form-item label="密码">
            <el-input 
              v-model="form.databaseConfig.mysql.password" 
              type="password" 
              placeholder="数据库密码" 
              show-password
            />
          </el-form-item>
          
          <el-form-item label="数据库名">
            <el-input v-model="form.databaseConfig.mysql.database" placeholder="数据库名称" />
          </el-form-item>
        </div>
        
        <!-- SQL Server 配置 -->
        <div v-if="form.databaseType === 'sqlserver'" class="db-config">
          <el-form-item label="服务器">
            <el-input v-model="form.databaseConfig.sqlserver.server" placeholder="数据库服务器" />
          </el-form-item>
          
          <el-form-item label="端口">
            <el-input-number v-model="form.databaseConfig.sqlserver.port" :min="1" :max="65535" />
          </el-form-item>
          
          <el-form-item label="用户名">
            <el-input v-model="form.databaseConfig.sqlserver.user" placeholder="数据库用户名" />
          </el-form-item>
          
          <el-form-item label="密码">
            <el-input 
              v-model="form.databaseConfig.sqlserver.password" 
              type="password" 
              placeholder="数据库密码" 
              show-password
            />
          </el-form-item>
          
          <el-form-item label="数据库名">
            <el-input v-model="form.databaseConfig.sqlserver.database" placeholder="数据库名称" />
          </el-form-item>
        </div>
        
        <el-form-item>
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
          <el-button @click="testConnection">测试连接</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="tips-card">
      <template #header>
        <div class="card-header">
          <span>提示说明</span>
        </div>
      </template>
      
      <div class="tips-content">
        <h3>数据库类型说明</h3>
        <ul>
          <li>
            <strong>SQLite:</strong> 轻量级文件数据库，无需额外配置，适合小型应用或开发环境。
          </li>
          <li>
            <strong>MySQL:</strong> 流行的开源数据库，适合中大型应用，需要单独安装MySQL服务器。
          </li>
          <li>
            <strong>SQL Server:</strong> 微软的企业级数据库，适合Windows环境和企业应用。
          </li>
        </ul>
        
        <h3>注意事项</h3>
        <ul>
          <li>修改数据库设置后，需要重启服务器才能生效。</li>
          <li>更改数据库类型不会自动迁移现有数据，请提前备份。</li>
          <li>确保数据库用户具有创建表和管理数据的权限。</li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useSettingsStore } from '../stores/settings'
import { ElMessage } from 'element-plus'
import { cloneDeep } from 'lodash'

const settingsStore = useSettingsStore()
const formRef = ref(null)
const loading = ref(false)

// 表单数据
const form = reactive({
  databaseType: 'sqlite',
  databaseConfig: {
    sqlite: {
      storage: './database.sqlite'
    },
    mysql: {
      host: 'localhost',
      port: 3306,
      username: 'root',
      password: '',
      database: 'admin_app'
    },
    sqlserver: {
      server: 'localhost',
      port: 1433,
      user: 'sa',
      password: '',
      database: 'admin_app'
    }
  }
})

// 加载设置
async function loadSettings() {
  try {
    loading.value = true
    await settingsStore.loadSettings()
    
    // 复制设置到表单
    const settings = settingsStore.settings
    form.databaseType = settings.databaseType
    
    // 深拷贝数据库配置
    form.databaseConfig = cloneDeep(settings.databaseConfig)
  } catch (err) {
    ElMessage.error('加载设置失败: ' + err.message)
  } finally {
    loading.value = false
  }
}

// 保存设置
async function saveSettings() {
  try {
    loading.value = true
    
    await settingsStore.saveSettings(cloneDeep(form))
    ElMessage.success('设置保存成功，请重启服务器使配置生效')
  } catch (err) {
    ElMessage.error('保存设置失败: ' + err.message)
  } finally {
    loading.value = false
  }
}

// 测试连接
async function testConnection() {
  try {
    loading.value = true
    
    const result = await settingsStore.testConnection(cloneDeep(form))
    
    if (result.success) {
      ElMessage.success(result.message)
    } else {
      ElMessage.error(result.message)
    }
  } catch (err) {
    ElMessage.error('测试连接失败: ' + err.message)
  } finally {
    loading.value = false
  }
}

// 重置表单
function resetForm() {
  loadSettings()
}

onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.settings {
  padding: 20px 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
}

.form-help {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.db-config {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.tips-card {
  margin-top: 20px;
}

.tips-content h3 {
  margin-top: 0;
  font-size: 16px;
  color: #303133;
}

.tips-content ul {
  padding-left: 20px;
}

.tips-content li {
  margin-bottom: 10px;
  color: #606266;
}
</style> 